<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>07-Sprite</title>
    <style>
        div {
            margin-bottom: 20px;
        }

        .icon1 {
            background-color: #ff0;
            width: 59px;
            height: 17px;
            background-image: url("images/topbar_car.png");
            background-repeat: no-repeat;
            background-position: -90px -68px;
        }

        /*.icon2 {
            width: 20px;
            height: 20px;
            background-image: url("images/my-icon.png");
            background-position: 0 -60px;
            background-color: #0f0;
        }*/

        .icon2, .icon3, .icon4, .icon5 {
            width: 20px;
            height: 20px;
            background: #0f0 url("images/my-icon.png");
        }

        .icon2 {
            background-position: 0 0;
        }

        .icon3 {
            background-position: 0 -20px;
        }

        .icon4 {
            background-position: 0 -40px;
        }

        .icon5 {
            background-position: 0 -60px;
        }

    </style>
</head>
<body>

<div class="icon1"></div>

<div class="icon2"></div>

<div class="icon3"></div>

<div class="icon4"></div>

<div class="icon5"></div>

</body>
</html>